<template>
    <div>
        <div class="activity-right" @click="hideSel($event)" style="padding-top:20px;">
            <h3>编辑商品</h3>
            <el-form label-position="right" ref="form" :rules="rules" :model="form" label-width="110px">
                <div class="form">
                    <el-form-item label="是否为爆款:">
                        <el-switch v-model="hotSaleStatus"></el-switch>
                    </el-form-item>
                    <el-form-item label="爆款开始时间:" v-if="hotSaleStatus">
                        <el-date-picker v-model="presaleTime" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="商品名称:" prop="goodsName">
                        <el-input style="width:400px" v-model="form.goodsName" type="text" placeholder="请输入商品名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="商品编号:" prop="goodsCode">
                        <el-input style="width:400px" v-model="form.goodsCode" type="text" placeholder="请输入商品编号" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="商品品牌:" prop="brandArray">
                        <el-select style="width:400px" v-model="form.brandId" filterable placeholder="选择品牌">
                            <el-option v-for="item in brandArray" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动专场:" prop="activityArray">
                        <el-select style="width:400px" @visible-change="getActivity" filterable v-model="form.activityId" placeholder="选择活动">
                            <el-option v-for="item in activityArr" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.activityId!= null" label="活动状态:" prop="activityStatus">
                        <template>{{activityStatus == 0 ? '展示' : (activityStatus==1 ? '售卖中':(activityStatus==2 ? '结束' :''))}}</template>
                    </el-form-item>
                    <!-- <el-form-item v-if="form.activityStatus != null" label="活动状态:" prop="activityStatus">
                    <template  >{{form.activityStatus==0 ? '有效' : (form.activityStatus==1 ? '展示':(form.activityStatus==2 ? '结束' :''))}}</template>
                </el-form-item> -->
                    <el-form-item label="商品介绍:" prop="goodsDesc">
                        <el-input type='textarea' :rows="5" style="width:400px" v-model="form.goodsDesc"></el-input>
                    </el-form-item>
                    <el-form-item label="商品原价:" prop="goodsPrice">
                        <el-input style="width:400px" v-model="form.goodsPrice" @change="handleChange" type="text" placeholder="请输入商品原价" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="商品折扣率:" prop="discountRate">
                        <el-input style="width:400px" :disabled="true" v-model="form.discountRate" @change="handleChange" type="text" placeholder="请输入商品折扣价" clearable> </el-input>
                    </el-form-item>
                    <el-form-item label="商品折扣价:" prop="discountPrice">
                        <el-input style="width:400px" v-model="form.discountPrice" @change="changeDiscountPrice" type="text" placeholder="请输入商品折扣价" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="会员折扣率:" prop="memberRate">
                        <el-input style="width:400px" :disabled="true" v-model="form.memberRate" @change="changeMemberRate" type="text" placeholder="请输入商品折扣价" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="会员折扣价:" prop="memberPrice">
                        <el-input style="width:400px" v-model="form.memberPrice" @change="changeMemberPrice" type="text" placeholder="请输入商品折扣价" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="商品状态:" prop="soldout">
                        <!-- <el-checkbox v-model="status">{{status ? '有效': '无效'}}</el-checkbox> -->
                        <el-switch v-model="status"> </el-switch>
                    </el-form-item>
                    <el-form-item label="商品颜色:" prop="goodscolour">
                        <el-input style="width:400px" v-model="form.goodsColor" type="text" placeholder="请输入商品颜色" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="上架时间:" prop="soldonTime">
                        <template>{{ $formate(form.soldonTime,'yyyy-MM-dd') }}</template>
                    </el-form-item>
                    <el-form-item label="商品轮播:" class="uploadWrap " v-loading="uploadLoading" prop="image">
                        <draggable v-model="form.goodsImages">
                            <transition-group>
                                <div class="prevImg" :key="index" v-for="(item,index) in form.goodsImages" v-if="form.goodsImages.length > 0">
                                    <img width="200" :src="item.url" alt="">
                                    <i class="el-icon-error" @click="deleteImgList(index)"></i>
                                </div>
                            </transition-group>
                        </draggable>
                        <template v-if="form.goodsImages.length < 9">
                            <div class="upload">
                                <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" multiple @change="upload($event)" />
                                <i class="el-icon-plus"></i>
                            </div>
                        </template>
                        <p class="red">
                            <small>最多可选择9张(第一张图片为商品封面图)</small>
                        </p>
                        <p class="red">
                            <small>建议尺寸：不小于400 * 400</small>
                        </p>
                    </el-form-item>
                    <div class="box">

                        <section class="goodsStock">
                            <el-form-item label="商品库存:">
                                <ul class='stock'>
                                    <li style="margin:5px" :key='item.id' v-for="item in form.goodsStock">
                                        <el-input style="width:130px;" v-model="item.specsName" type="text" placeholder="尺码" clearable></el-input>
                                        :
                                        <el-input style="width:80px;" v-model="item.stockNum" type="text" placeholder="数量" clearable></el-input>
                                    </li>
                                </ul>
                                <div class="addSize" style="margin:5px">
                                    <el-button style="float:left" type="primary" @click="addgoodsSize">新增</el-button>
                                </div>
                            </el-form-item>
                        </section>
                    </div>
                </div>
            </el-form>
            <!-- 查看大图 -->
            <div class='popup-detail imgbox' v-if='isShow1'>
                <template>
                    <el-carousel :interval="5000" arrow="always" :initial-index="imageNum">
                        <el-carousel-item v-for="item in form.goodsImages" :key="item.id">
                            <img :src="item.url" alt="">{{item.url}}
                            <i class="el-icon-circle-close-outline close" title="关闭" @click="closeImage()"></i>
                        </el-carousel-item>

                    </el-carousel>
                </template>
            </div>
            <section class="submit">
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button type="primary" style="margin-left:10px" @click="$router.go(-1)">返回</el-button>
            </section>
        </div>
    </div>
</template>
<script>
import draggable from "vuedraggable";
import {
    getQiniuToken,
    qiniuBaseUrl,
    getGoodsById,
    getCategory,
    getStores,
    updateGoods,
    getBrand,
    allActivityList,
    getActivityDetail
} from "../../data/postData";
export default {
    components: {
        draggable
    },
    data() {
        return {
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            getTagByStoreNo: null,
            form: {
                goodsName: "",
                goodsCode: "",
                goodsPrice: "",
                discountPrice: "",
                discountRate: "",
                storeNo: "",
                categoryId: "",
                goodsPic: "",
                soldout: "",
                brandId: "",
                goodsDesc: "",
                soldonTime: "",
                soldoutTime: "",
                goodscolor: "",
                goodsImg: [],
                goodsImages: [],
                goodsSize: [],
                activityId: "",
                storePrice: 0,
                memberPrice: "",
                memberRate: ""
            },
            hotSaleStatus: false, // 是否为爆款
            presaleTime: "", // 爆款开始时间
            storePrice: 0,
            activityStatus: "",
            activityArr: [],
            isShow1: false,
            imgNum: 0,
            brandArray: [],
            disabled: false,
            storesList: [],
            status: true,
            addGoodsVal: null,
            paramList: [],
            activityId: "",
            files: "",
            categoryId: "",
            goodsItem: [],
            selGoodItemVal: [],
            isShowGoodsItem: false,
            goodsItem1: [],
            goodsItem2: [],
            goodsItem3: [],
            textarea: "",
            discount: false,
            coverUploadLoading: false,
            uploadLoading: false,
            rules: {
                goodsName: [
                    {
                        required: true,
                        message: "请输入商品名称",
                        trigger: "blur"
                    }
                ],
                discountPrice: [
                    {
                        required: true,
                        message: "请输入折扣价",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            if (!/^\d+(\.\d(\d)?)?$/.test(value)) {
                                callback(
                                    new Error("正确输入折扣价：保留两位小数")
                                );
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                discountRate: [
                    {
                        required: true,
                        message: "请输入折扣率",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            // /^-?\d+\.?\d{0,2}$/
                            if (!/^\d(\.\d)?$/.test(value)) {
                                callback(
                                    new Error("正确输入折扣率：例'9'或'9.5'")
                                );
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                memberRate: [
                    {
                        required: true,
                        message: "请输入会员折扣价",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            if (!/^\d(\.\d)?$/.test(value)) {
                                callback(
                                    new Error("正确输入折扣率：例'9'或'9.5'")
                                );
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                memberPrice: [
                    {
                        required: true,
                        message: "请选择会员折扣价",
                        trigger: "blur"
                    },
                    {
                        validator: function(rule, value, callback) {
                            if (!/^\d+(\.\d(\d)?)?$/.test(value)) {
                                callback(
                                    new Error(
                                        "正确输入会员折扣价：保留两位小数"
                                    )
                                );
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                soldout: [
                    { required: true, message: "选择商品状态", trigger: "blur" }
                ],
                goodsPrice: [
                    {
                        required: true,
                        message: "请输入商品价格",
                        trigger: "blur"
                    }
                ],
                goodscolor: [
                    { required: true, message: "选择颜色", trigger: "blur" }
                ],
                soldoutTime: [
                    {
                        required: true,
                        message: "请选择下架时间",
                        trigger: "blur"
                    }
                ],
                storeNo: [
                    { required: true, message: "选择所属店铺", trigger: "blur" }
                ],
                goodsCode: [
                    { required: true, message: "选择商品编码", trigger: "blur" }
                ],
                brandArray: [
                    { required: true, message: "选择商品品牌", trigger: "blur" }
                ],
                activityArray: [
                    { required: true, message: "选择关联活动", trigger: "blur" }
                ],
                image: [
                    { required: true, message: "选择商品图片", trigger: "blur" }
                ]
                // purchaseCost: [
                //     { required: true, message: '输入商品代购价', trigger: 'blur' }
                // ],
                // storePrice: [
                //     { required: true, message: '输入平台加价', trigger: 'blur' }
                // ],
            }
        };
    },
    mounted() {
        // 获取三级列表的第一级
        // this.$http.get(getCategory + '?categoryId=0').then(res=>{
        //     this.goodsItem1 = res.data
        // })
        this.getStoresList();
        var params = {
            data: {
                goodsId: this.$route.params.id,
                storeNo: this.user.storeNo
            }
        };
        this.$fetch
            .post(getGoodsById, params)
            .then(res => {
                this.form = res.data;
                this.form.activityId = res.data.activityId;
                this.status = res.data.soldout == 0 ? true : false;
                this.activityStatus = res.data.activityStatus;
                this.hotSaleStatus = res.data.hotSale == 1 ? true : false;
                this.presaleTime = new Date(res.data.presaleTime);
                // this.form.storePrice =Math.ceil((+this.form.discountPrice) - Math.ceil(this.form.goodsPrice * this.form.discountRate/10))
                console.log("discountPrice", this.form.discountPrice);
                console.log("goodsPrice", this.form.goodsPrice);
                console.log("discountRate", this.form.discountRate);
                console.log("storePrice", this.storePrice);
                console.log(res.data.goodsColor);
            })
            .catch(err => {
                this.$message({
                    message: err.message,
                    type: "warning"
                });
            });

        var params1 = {
            data: {}
        };
        this.$fetch
            .post(getBrand, params1)
            .then(res => {
                console.log(res.data);
                res.data.forEach((item, i) => {
                    this.brandArray.push({
                        value: item.id,
                        label: item.name
                    });
                });
            })
            .catch(err => {});
        var params2 = {
            data: {
                storeNo: this.user.storeNo
            }
        };
        this.$fetch
            .post(allActivityList, params)
            .then(res => {
                res.data.forEach(item => {
                    this.activityArr.push({
                        value: item.id,
                        label: item.name
                    });
                });
            })
            .catch(err => {});
    },
    methods: {
        addgoodsSize() {
            this.form.goodsStock.push({
                specsName: "",
                stockNum: "0"
            });
        },
        //获取活动列表
        getActivity() {
            let params = {
                data: {
                    id: "" + this.form.activityId,
                    storeNo: this.form.storeNo
                }
            };
            console.log(params, "----params");
            this.$fetch.post(getActivityDetail, params).then(res => {
                this.activityStatus = res.data.status;
            });
        },
        clickImage(index) {
            console.log(this.form.goodsUrl);
            console.log(index);
            this.imageNum = index;
            this.isShow1 = true;
        },
        closeImage() {
            this.isShow1 = false;
            //.toFixed(2)
        },
        changeMemberRate() {
            let { memberRate, discountPrice, memberPrice } = this.form;

            console.log("memberRate", memberRate);
            if (memberRate && discountPrice) {
                this.form.memberPrice =
                    Math.round(discountPrice * memberRate) / 10;
            }
        },
        changeMemberPrice() {
            let { memberRate, discountPrice, memberPrice } = this.form;
            if (+memberPrice > +discountPrice) {
                this.$message({
                    message: "会员折扣价不能大于商品折扣价",
                    type: "warning",
                    duration: 1500
                });
            } else if (memberPrice && discountPrice) {
                console.log(memberPrice, discountPrice);
                this.form.memberRate =
                    Math.round(memberPrice / discountPrice * 100) / 10;
            }
        },

        handleChange() {
            this.form.discountPrice =
                Math.ceil(
                    +this.form.goodsPrice * +this.form.discountRate / 10
                ) + +this.storePrice;
            this.changeMemberPrice();
        },
        changeDiscountPrice() {
            this.form.discountRate = "";
            if (
                this.form.goodsPrice &&
                this.form.goodsPrice != "" &&
                this.form.discountPrice &&
                this.form.discountPrice != ""
            ) {
                this.form.discountRate =
                    Math.round(
                        (+this.form.discountPrice - +this.storePrice) *
                            100 /
                            +this.form.goodsPrice
                    ) / 10;
            }
            this.changeMemberPrice();
        },
        getStoresList() {
            var params = {
                data: {}
            };
            var arr = [];
            this.$fetch.post(getStores, params).then(res => {
                res.data.forEach((val, i) => {
                    arr.push({
                        label: val.storeName,
                        value: val.storeNo,
                        key: val.storeId
                    });
                });
                this.storesList = arr;
                console.log(this.storesList);
            });
        },
        delColor() {
            this.isShow = false;
        },
        message(msg, icon) {
            this.$message({
                message: msg,
                type: icon ? icon : "success"
            });
        },
        submit() {
            let pp2 = false;
            if (this.form.goodsImages) {
                let goodsimage = [];
                this.form.goodsImages.forEach((val, i) => {
                    goodsimage.push(val.url);
                    this.form.goodsImg = goodsimage;
                });
            }
            // 商品状态
            if (this.status) {
                this.form.soldout = 0;
            } else {
                this.form.soldout = 1;
            }
            console.log(this.form.goodsImg, "goodsImg");
            if (this.form.goodsStock && this.form.goodsStock.length > 0) {
                console.log();
                var goodssize = [];
                this.form.goodsStock.forEach((val, i) => {
                    if (val.stockNum > 0 && val.stockNum < 10000) {
                        goodssize.push({
                            size: val.specsName,
                            num: val.stockNum.toString()
                        });
                    }
                });
                console.log(goodssize, "-------goodssizeppppp");
                if (goodssize.length > 0) {
                    let obj = {};
                    let new2 = goodssize;
                    new2 = new2.reduce((cur, next) => {
                        obj[next.size]
                            ? ""
                            : (obj[next.size] = true && cur.push(next));
                        return cur;
                    }, []);
                    console.log(goodssize, "--------goodssize");
                    console.log(new2, "-------new2");
                    if (goodssize.length > new2.length) {
                        this.$message({
                            message: "商品尺码重复，请重新选择",
                            type: "warning",
                            duration: 1500
                        });
                        pp2 = false;
                    } else {
                        pp2 = true;
                        this.form.goodsSize = goodssize;
                    }
                } else {
                    pp2 = false;
                    this.$message({
                        message: "商品库存不能为空且单个尺寸数量不大于10000",
                        type: "warning",
                        duration: 1500
                    });
                }
            }
            console.log(pp2, "-------pp2------", this.form.memberRate);
            if (this.form.goodsName == "") {
                this.$message({
                    message: "商品名称不能为空",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.form.goodsPrice == "") {
                this.$message({
                    message: "商品原价不能为空",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.form.discountRate == "") {
                this.$message({
                    message: "商品折扣率不能为空",
                    type: "warning",
                    duration: 1000
                });
            } else if (
                this.form.discountPrice == "" ||
                /^\d+(\.\d)?$/.test(this.form.discountPrice) == false
            ) {
                this.$message({
                    message: "商品折扣价不能为空",
                    type: "warning",
                    duration: 1000
                });
            } else if (
                this.form.memberRate == "" ||
                /^\d+(\.\d)?$/.test(this.form.memberRate) == false
            ) {
                this.$message({
                    message: "请输入正确的会员折扣率",
                    type: "warning",
                    duration: 1000
                });
            } else if (
                this.form.purchaseCost == "" ||
                /^0\.\d{1,2}$/.test(this.form.purchaseCost) == false
            ) {
                this.$message({
                    message: "请输入商品代购费率，且为0-100之间最多两位小数",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.form.memberPrice == "") {
                this.$message({
                    message: "请输入会员价格，若无会员价则输入商品折扣价",
                    type: "warning",
                    duration: 1000
                });
            } else if (
                this.form.goodsImg.length < 1 ||
                this.form.goodsImg.length > 9
            ) {
                this.$message({
                    message: "请上传商品图片,且最多为9张",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.form.brandId == "") {
                this.$message({
                    message: "选择商品品牌",
                    type: "warning",
                    duration: 1000
                });
            } else if (this.form.activityId == "") {
                this.$message({
                    message: "请选择活动",
                    type: "warning",
                    duration: 1000
                });
            }

            if (
                this.form.goodsImg &&
                this.form.goodsImg.length > 0 &&
                pp2 == true
            ) {
                var params = {
                    data: {
                        goodsId: "" + this.form.goodsId,
                        goodsCode: "" + this.form.goodsCode,
                        brandId: "" + this.form.brandId,
                        goodsDesc: this.form.goodsDesc,
                        goodsName: this.form.goodsName,
                        goodsPrice: "" + this.form.goodsPrice,
                        discountPrice: "" + this.form.discountPrice,
                        discountRate: "" + this.form.discountRate,
                        memberPrice: "" + this.form.memberPrice,
                        memberRate: "" + this.form.memberRate,
                        goodsColor: this.form.goodsColor,
                        soldout: "" + this.form.soldout,
                        storeNo: this.form.storeNo,
                        goodsImg: this.form.goodsImg,
                        goodsSize: this.form.goodsSize,
                        goodsPic: this.form.goodsImg[0],
                        categoryId: "" + this.form.categoryId,
                        activityId: "" + this.form.activityId,
                        purchaseCost: "" + this.form.purchaseCost,
                        memberPrice: "" + this.form.memberPrice
                    }
                };
                if (this.hotSaleStatus) {
                    params.data.hotSale = 1;
                    params.data.presaleTime = +new Date(
                        this.presaleTime
                    ).getTime();
                } else {
                    params.data.hotSale = 0;
                }
                this.$confirm("确认保存？").then(_ => {
                    this.$fetch
                        .post(updateGoods, params)
                        .then(res => {
                            this.$message({
                                message: res.message,
                                type: "success",
                                duration: 1000
                            });
                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 1500);
                        })
                        .catch(err => {
                            this.$message({
                                message: err.message,
                                type: "warning",
                                duration: 1000
                            });
                        });
                });
            } else if (pp2 == false) {
                this.$message({
                    message: "商品尺码重复，请重新选择",
                    type: "warning",
                    duration: 1000
                });
            } else {
                this.$message({
                    message: "商品轮播图片至少需要一张",
                    type: "warning",
                    duration: 1000
                });
            }
        },
        hideSel(e) {
            let className = e.target.className;
            if (
                className.search("selList") < 0 &&
                className.search("selGoodsItem") < 0 &&
                className.search("gray") < 0
            ) {
                this.isShowGoodsItem = false;
            }
        },
        // // 多级项目选择
        selGoodsItem(res) {
            this.isShowGoodsItem = true;
            this.goodsItem2 = [];
            this.goodsItem3 = [];
            this.goodsItem = [];
        },
        loadTwo(val, name) {
            this.goodsItem = [];
            this.goodsItem.push({
                val: val,
                name: name
            });
            this.$fetch
                .get(getCategory + "?categoryId=" + val)
                .then(res => {
                    this.goodsItem2 = res.data;
                    console.log("goodsItem3", this.goodsItem3);
                })
                .catch(err => {
                    this.message(err.message, "error");
                });
        },
        loadTree(val, name) {
            console.log("loadTree");
            this.$fetch
                .get(getCategory + "?categoryId=" + val)
                .then(res => {
                    this.goodsItem[1] = {
                        val: val,
                        name: name
                    };
                    this.goodsItem3 = res.data;
                    console.log("goodsItem3", this.goodsItem3);
                })
                .catch(err => {
                    this.message(err.message, "error");
                });
        },
        selDone(val, name) {
            this.goodsItem[2] = {
                val: val,
                name: name
            };
            this.isShowGoodsItem = false;
        },
        upload(e) {
            const that = this;
            var files = e.target.files;
            for (let i = 0; i < files.length; i++) {
                let width, height;
                let reader = new FileReader();
                reader.onload = function(e) {
                    var image = new Image();
                    image.onload = function() {
                        width = image.width;
                        height = image.height;
                        if (width >= 400 && height >= 400 && width == height) {
                            that.uploadLoading = true;
                            that.$http
                                .get(getQiniuToken, {
                                    params: {
                                        wxUid: "",
                                        wxSid: ""
                                    }
                                })
                                .then(res1 => {
                                    let config = {
                                        headers: {
                                            "Content-Type":
                                                "multipart/form-data"
                                        }
                                    };
                                    let formdata = new FormData(); //创建form对象
                                    formdata.append(
                                        "file",
                                        files[i],
                                        files[i].name
                                    );
                                    formdata.append("chunk", "0"); //断点传输
                                    formdata.append("chunks", "1");
                                    formdata.append("token", res1.data.uptoken);
                                    that.$http
                                        .post(
                                            "http://up-z1.qiniup.com",
                                            formdata,
                                            config
                                        )
                                        .then(res2 => {
                                            if (res2.data.key != "") {
                                                // 加判断是第几个商品
                                                that.form.goodsImages.push({
                                                    id:
                                                        that.form.goodsImages
                                                            .length,
                                                    mediaType: 0,
                                                    goodsId: that.form.goodsId,
                                                    url:
                                                        qiniuBaseUrl +
                                                        res2.data.key +
                                                        "?imageMogr2/thumbnail/400000@"
                                                });
                                                that.$message({
                                                    title: "提示",
                                                    message: "图片上传成功",
                                                    type: "success"
                                                });
                                                that.uploadLoading = false;
                                            }
                                        });
                                });
                        } else {
                            that.$message({
                                title: "提示",
                                message: "上传图片尺寸要求不小于400*400方图",
                                type: "warning"
                            });
                        }
                    };
                    image.src = e.target.result;
                };
                reader.readAsDataURL(files[i]);
            }
        },
        deleteImgList(id) {
            console.log("--------");
            console.log(id);
            this.form.goodsImages.splice(id, 1);
            // this.form.goodsImages.forEach((val,i)=>{
            //     if (val.id == id.id) {
            //         this.form.goodsImages.splice(i,1)
            //     }
            // })
        },
        goToPrev(index) {
            console.log(9999999999);
            console.log(index);
            let newImg = this.form.goodsImages.slice();
            if (index > 0) {
                let now = newImg[index].url.toString();
                let prev = newImg[index - 1].url.toString();
                newImg[index].url = prev;
                newImg[index - 1].url = now;
                console.log("goodsImages", newImg);
            }
            this.form.goodsImages = newImg;
        }
    }
};
</script>

<style scoped lang="less">
@import url("../../style/activity.less");
@import url("../../style/goods.less");
.activity-right {
    h3 {
        margin-bottom: 20px;
    }
}
.stock {
    display: inline-block;
    li {
        float: left;
        padding: 0 10px;
        input {
            width: 40px;
        }
    }
}
.addGoods-1 {
    margin-top: 20px;
    border-bottom: 2px solid #000;
}
.addColor {
    margin-bottom: 10px;
    margin-left: 80%;
}
.submit {
    margin-left: 80%;
    margin-top: 30px;
}
.form {
    margin-bottom: 20px;
}
.box {
    width: 100%;
    border-bottom: 2px solid #000;
    .color {
        display: flex;
        flex-flow: row;
        ul {
            width: 50%;
        }
    }
    li.goodscolor {
        width: 50%;
    }
}
.imgbox {
    width: 574px;
    height: 600px;
    padding: 0;
    overflow: hidden;
    img {
        width: 100%;
        height: 100%;
    }
    .close {
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 24px;
        color: #ec5051;
        cursor: pointer;
    }
}
</style>